<template>
<div class="ww100 mt30">
    <div class="">
      <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item :label="$t('cash.time_range')">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
                size="small"
                v-model="searchForm.createTime"
                type="daterange"
                value-format="YYYY-MM-DD"
                :range-separator="$t('cash.to')"
                :start-placeholder="$t('cash.date_start')"
                :end-placeholder="$t('cash.date_end')"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item :label="$t('cash.select_merchant')">
          <el-select size="small" v-model="formInline.supplierId" filterable  :placeholder="$t('cash.all')">
            <el-option :label="$t('cash.all')" value="0"></el-option>
            <el-option v-for="(item, index) in supplierList" :key="index" :label="item.name" :value="item.shopSupplierId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="onSubmit">{{$t('cash.search')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--内容-->
    <div class="product-content">
      <div class="table-wrap">
        <el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
          <el-table-column prop="shopSupplierId" :label="$t('cash.merchant_id')" width="90"></el-table-column>
          <el-table-column prop="name" :label="$t('cash.merchant_name')"></el-table-column>
          <el-table-column prop="orderMoney" :label="$t('cash.order_total')"></el-table-column>
          <el-table-column prop="realSupplierMoney" :label="$t('cash.merchant_actual_settlement_label')" ></el-table-column>
          <el-table-column prop="realSysMoney" :label="$t('cash.platform_actual_total_cut')" ></el-table-column>
          <el-table-column prop="agentMoney" :label="$t('cash.distribution_value')"></el-table-column>
          <el-table-column fixed="right" :label="$t('cash.operation')" >
            <template  #default="scope">
              <el-button @click="detail(scope.row)" type="text" size="small" >{{$t('cash.details')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--分页-->
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="curPage"
          :page-size="pageSize" layout="total, prev, pager, next, jumper"
          :total="totalDataNumber">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import SupplierApi from '@/api/supplier.js';
import { formatDate } from '@/utils/DateTime.js';
export default {
  components: {},
  data() {
    return {
      /*是否加载完成*/
      loading: true,
      /*列表数据*/
      tableData: [],
      /*一页多少条*/
      pageSize: 20,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      /*横向表单数据模型*/
      formInline: {
        supplierId: null
      },
      searchForm: {
        createTime: []
      },
      supplierList: [],
      /*是否打开添加弹窗*/
      open_add: false,
      /*是否打开编辑弹窗*/
      open_edit: false,
      /*当前编辑的对象*/
      userModel: {},
      logoImgs: [],
      businessImgs: []
    };
  },
  created() {
    /*获取列表*/
    this.getTableList();
  },
  methods: {
    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.loading = true;
      self.getTableList();
    },
    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getTableList();
    },
    /*获取列表*/
    getTableList() {
      let self = this;
      let search = self.searchForm;
      let Params = self.formInline;
      Params.pageIndex = self.curPage;
      Params.pageSize = self.pageSize;
      if (search.createTime.length > 1) {
        Params.startDate = search.createTime[0];
        Params.endDate = search.createTime[1];
      } else {
        Params.startDate = new Date();
        Params.endDate = new Date();
        Params.startDate.setTime(Params.startDate.getTime() - 3600 * 1000 * 24 * 7);
        Params.startDate = formatDate(Params.startDate, 'yyyy-MM-dd');
        Params.endDate = formatDate(Params.endDate, 'yyyy-MM-dd');
        search.createTime[0] = Params.startDate;
        search.createTime[1] = Params.endDate;
      }
      SupplierApi.dataList(Params, true).then(res => {
        self.loading = false;
        self.tableData = res.data.dataList.records;
        self.totalDataNumber = res.data.dataList.total;
        self.supplierList = res.data.supplierList;
      }).catch(error => {
        self.loading = false;
      });
    },
    /*打开添加*/
    detail(row) {
      let self = this;
      self.$router.push({
        path: '/cash/settled/dataDetail',
        query: {
          supplierId: row.shopSupplierId,
          pageIndex: self.curPage,
          pageSize: self.pageSize,
          startDate: self.searchForm.createTime[0],
          endDate: self.searchForm.createTime[1]
        }
      });
    },
    /*搜索查询*/
    onSubmit() {
      this.curPage = 1;
      this.getTableList();
    }
  }
};
</script>

